<template>
  <div>
    <div style="text-align: right">
      总条数:{{ total }}当前条数:{{ tableData.length }}
    </div>
    <!-- <el-table v-loadmore:el-table__body-wrapper="loadMore" :data="tableData" height="300" border>
      <el-table-column prop="index" label="序号" width="100" />
      <el-table-column prop="nameCn" label="中文名称" />
      <el-table-column prop="nameEn" label="英文名称" />
      <el-table-column prop="specsNames" label="规格" />
    </el-table> -->
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { listApi } from "@/api/request";
export default {
  data() {
    return {
      tableData: [],
      params: { pageNo: 1, pageLe: 10 },
      total: 0,
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming",
      ],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  methods: {
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    loadMore() {
      if (this.total > this.tableData.length) {
        this.params.pageNo++;
        this.getList();
      } else {
        console.log("没有更多了");
      }
    },
    async getList() {
      try {
        const { total, data } = await listApi(this.params);
        console.log("请求参数", { ...this.params }, "请求结果", total, data);
        this.total = total;
        if (this.params.pageNo == 1) {
          this.tableData = data;
        } else {
          this.tableData.push(...data);
        }
        this.tableData = this.tableData.map((n, index) => ({
          ...n,
          index: index + 1,
        }));
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
